<template>
    <section v-loading="listLoading">
        <el-card class="box-card mt-20">
            <el-row>
                <el-col :span="18">
                    <div class="grid-content title">
                        <h4>{{ tableData.correctiveReportDto.title }}</h4>
                        <p>
<!--
                            <span>整改状态 :</span> {{ dict.corrected_progress_status[tableData.correctiveReportDto.status]  }}
-->
                        </p>
                    </div>
                </el-col>
                <el-col :span="6"  align="right">
                    <el-button @click="()=>this.$router.go(-1)"> 返 回 </el-button>
                    <el-button
                            v-if="!this.$route.query.type && tableData.correctiveReportDto.status === 4"
                            type="primary"

                            @click="()=> submitReviewDialog = true"
                    > 审 核 </el-button>
                </el-col>
            </el-row>
            <el-row>
                <!--<div v-if="tableData.correctiveReportDto.status == 5">
                    <span style="color:#555">本次整改已全部完成，整改明细请返回前一页下载word版整改报告，下期将支持系统内查看整改详情</span>
                </div>-->
                <div>
                    <detail-common :tableData="tableData" v-if="!listLoading" />
                    <!-- <el-col :span="24">
                        <div>
                            <span style="font-size: 16px; color: rgb(51, 51, 51);">综合意见</span>
                            <p style=" color: #666;line-height: 28px; margin:0 0 35px;">{{tableData.correctiveReportDto.suggestion}}</p>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <el-tabs v-model="activeName">
                            <el-tab-pane :label="'整改检查项 ( ' + reformNumber + '项 )'" name="corrected">
                                <el-col :span="24">
                                    <div class="item-column">
                                        <span class="corrected-title">整改总结</span>
                                        <p style="margin:0 0 20px;">


                                            <el-input
                                                    :autosize="true"
                                                    type="textarea"
                                                    resize="none"
                                                    class="showTextConter"
                                                    v-model="tableData.correctiveReportDto.suggestion"
                                                    readonly>
                                            </el-input>
                                        </p>
                                    </div>
                                    <ul class="corrected-item">
                                        <li v-for="(item, index) in tableData.correctiveItems" :key="index">
                                            <div v-if="item.correctiveItemDto.status === 1 || item.correctiveItemDto.status === 3" class="list-item">

                                                <p class="check-item-desc">
                                                    {{ item.checkItemDescDTO.check_item_three_order_number + ' ' + item.checkItemDescDTO.check_item_three }}
                                                </p>
                                                <div class="item-title-s step1">
                                                    检查信息
                                                </div>
                                                <div class="item-content">
                                                     <div class="check-item-images" v-if="item.checkItemDescDTO.image_list.length > 0">
                                                    <span class="item-column-title">图片</span>
                                                    <ul class="image-list">
                                                        <li v-for="(imageItem, index) in item.checkItemDescDTO.image_list" :key="index">
                                                            <img :src="basis_url + imageItem.path" alt="" @click="handlePictureCardPreview({url:imageItem.path})" />
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="check-item-building-room item-column" v-if="item.checkItemDescDTO.building_room.length > 0">
                                                    <span class="item-column-title">涉及房间</span>
                                                    <div>
                                                        <el-tag
                                                                v-for="(tagRoom, index) in item.checkItemDescDTO.building_room"
                                                                :key="index"
                                                                type="success"
                                                                style="margin-right:15px;"
                                                        >
                                                            {{tagRoom.building}}
                                                        </el-tag>
                                                    </div>
                                                </div>
                                                <div class="check-item-building-info item-column" v-if="item.checkItemDescDTO.desc.length > 0">
                                                    <span class="item-column-title">描述信息</span>
                                                    <el-input
                                                            :autosize="true"
                                                            type="textarea"
                                                            resize="none"
                                                            class="showTextConter"
                                                            v-model="item.checkItemDescDTO.desc"
                                                            readonly>
                                                    </el-input>

                                                </div>
                                                </div>
                                               
                                                <div>

                                                    <div class="item-title-s step2">
                                                        整改信息
                                                    </div>
                                                    <el-row :gutter="40" v-for="(checkItemInfo, checkItemindex) in item.correctiveItemDto.check_item_info" :key="checkItemindex">
                                                        <div class="items-column-row">
                                                            <el-col :span="24">
                                                                <span class="item-column-title">整改内容 {{checkItemindex + 1}}</span>
                                                            </el-col>
                                                            <el-col :span="24">
                                                                <div class="check-item-effect-images items-column-row-column">
                                                                    <span class="item-column-title">图片</span>
                                                                    <ul class="image-list" v-if="checkItemInfo.images.length > 0">
                                                                        <li v-for="(imageItem, imageIndex) in checkItemInfo.images" :key="imageIndex">
                                                                            <img :src="basis_url + imageItem.path" alt="" @click="handlePictureCardPreview({url:imageItem.path})" />
                                                                        </li>
                                                                    </ul>
                                                                    <p v-else style="line-height:16px; margin:0;">
                                                                        暂无
                                                                    </p>
                                                                </div>
                                                            </el-col>
                                                         
                                                            <el-col :span="24">
                                                                <div class="check-item-cause items-column-row-column">
                                                                    <span class="item-column-title">原因分析</span>
                                                                    <el-input
                                                                            type="textarea"
                                                                            resize="none"
                                                                            autosize
                                                                            class="showTextConter"
                                                                            placeholder="未填写原因分析"
                                                                            v-model="checkItemInfo.reason"
                                                                            readonly>
                                                                    </el-input>
                                                                </div>
                                                            </el-col>
                                                            <el-col :span="24">
                                                                <div class="check-item-effect items-column-row-column">
                                                                    <span class="item-column-title">整改措施与结果</span>

                                                                    <el-input
                                                                            type="textarea"
                                                                            resize="none"
                                                                            autosize
                                                                            class="showTextConter"
                                                                            placeholder="未填写整改措施与结果"
                                                                            v-model="checkItemInfo.measure"
                                                                            readonly>
                                                                    </el-input>
                                                                </div>
                                                            </el-col>
                                                               <el-col :span="24">
                                                                <div class="check-item-effect-file items-column-row-column">
                                                                    <span class="item-column-title">附件</span>
                                                                    <div v-if="checkItemInfo.files && checkItemInfo.files.length > 0">
                                                                        <a v-for="(fileItem, filesIndex) in checkItemInfo.files" :key="filesIndex" :href="basis_url + fileItem.path">{{ fileItem.origin_name }}</a>
                                                                    </div>
                                                                    <p v-else style="line-height:16px; margin:0;">
                                                                        暂无
                                                                    </p>
                                                                </div>
                                                            </el-col>
                                                        </div>
                                                    </el-row>

                                                </div>



                                                <div>
                                                    <div class="item-title-s step3">
                                                        批注信息
                                                    </div>
                                                    <div class=""  v-if="item.correctiveItemDto.audit"  style="margin-top:20px;">
                                                        <div style="margin-bottom:20px;">
                                                            <el-tag type="success" v-if="item.correctiveItemDto.audit===1">合格</el-tag>
                                                            <el-tag type="danger" v-else>不合格</el-tag>

                                                        </div>
                                                        <div>
                                                            <el-input
                                                                    class="showTextConter"
                                                                    :autosize="{ minRows: 2}"
                                                                    :maxlength="400"
                                                                    readonly=""
                                                                    type="textarea"
                                                        
                                                                    v-model="item.correctiveItemDto.audit_reason">
                                                            </el-input>
                                                        </div>
                                                    </div>
                                                </div>



                                            </div>
                                        </li>
                                    </ul>
                                </el-col>
                            </el-tab-pane>
                            <el-tab-pane :label=" '未整改检查项 ( ' +  unReformNumber + ' 项  )'" name="unCorrected" v-show="paneShow">
                                <el-col :span="24">
                                    <ul class="corrected-item">
                                        <li v-for="(item, index) in tableData.correctiveItems" :key="index">
                                            <div v-if="item.correctiveItemDto.status === 2" class="list-item">
                                                <p class="check-item-desc">
                                                    {{ item.checkItemDescDTO.check_item_three_order_number + ' ' + item.checkItemDescDTO.check_item_three }}
                                                </p>
                                                <div class="item-title-s step1">
                                                    检查信息
                                                </div>

                                                <div class="item-content">
                                                     <div class="check-item-images item-column" v-if="item.checkItemDescDTO.image_list.length > 0">

                                                    <span class="item-column-title">图片</span>
                                                    <ul class="image-list">
                                                        <li v-for="(imageItem, index) in item.checkItemDescDTO.image_list" :key="index">
                                                            <img :src="basis_url + imageItem.path" alt=""  @click="handlePictureCardPreview({url:imageItem.path})" />
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="check-item-building-room item-column"  v-if="item.checkItemDescDTO.building_room.length > 0">
                                                    <span class="item-column-title">涉及房间</span>
                                                    <div>
                                                        <el-tag
                                                                v-for="(tagRoom, index) in item.checkItemDescDTO.building_room"
                                                                :key="index"
                                                                type="success"
                                                                style="margin-right:15px;"
                                                        >
                                                            {{tagRoom.building}}
                                                        </el-tag>
                                                    </div>
                                                </div>
                                                <div class="check-item-building-info item-column" v-if="item.checkItemDescDTO.desc.length > 0">
                                                    <span class="item-column-title">问题描述</span>
                                                    <p>
                                                        <el-input
                                                                autosize
                                                                type="textarea"
                                                                resize="none"
                                                                class="showTextConter"
                                                                v-model="item.checkItemDescDTO.desc"
                                                                readonly>
                                                        </el-input>
                                                    </p>
                                                </div>
                                               
                                                </div>

                                                <div class="item-title-s step1">
                          未整改信息
                        </div>
                        <div class="item-content" v-if='item.correctiveItemDto.no_reason&&item.correctiveItemDto.no_reason.length || item.correctiveItemDto.no_reason_files&& item.correctiveItemDto.no_reason_files.length'>
                           <div class="check-item-corrected">
                          <span class="item-column-title">未整改原因及未来整改计划</span>
                          <el-input
                            v-if="item.correctiveItemDto.no_reason && item.correctiveItemDto.no_reason != ''"
                            type="textarea"
                            resize="none"
                            class="showTextConter"
                            autosize
                            v-model="item.correctiveItemDto.no_reason"
                            readonly
                          ></el-input>
                          <p v-else style="line-height:16px; margin:0;">暂无</p>
                        </div>
                        <div class="check-item-effect-file item-column">
                          <span class="item-column-title">附件</span>
                          <div
                            v-if="item.correctiveItemDto.no_reason_files && item.correctiveItemDto.no_reason_files.length > 0"
                          >
                            <a
                              v-for="(fileItem, index) in item.correctiveItemDto.no_reason_files"
                              href="javascript:;"
                              @click="downloadFile(fileItem.path,fileItem.origin_name)"
                              :key="index"
                            >{{ fileItem.origin_name }}</a>
                          </div>
                          <p v-else style="line-height:16px; margin:0;">暂无</p>
                          <br />
                        </div>

                        </div>

                        <p v-else  class="item-content"  style="line-height:36px; margin:0;">暂无</p>
                                               
                                            </div>
                                        </li>
                                    </ul>
                                </el-col>
                            </el-tab-pane>
                        </el-tabs>
                    </el-col> -->
                </div>
            </el-row>
        </el-card>
        <el-dialog
                title="请输入审核意见"
                :visible.sync="submitReviewDialog"
                width="30%"
                :before-close="handleClose">
            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model.trim="reviewDesc" placeholder="请输入审核意见"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="submitReviewDialog = false"> 取 消 </el-button>
                <el-button type="danger" @click="auditReview(2)"> 打 回 </el-button>
                <el-button type="primary" @click="auditReview(1)"> 通 过 </el-button>
              </span>
        </el-dialog>
        <el-dialog :visible.sync="dialogShowImages">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </section>
</template>

<script>
    import { getCorrectedProgressData, eduAuditReview } from '../../api/corrected_api'
    import dict from '../../common/js/dict';
    import { saveAs } from '../../common/js/commons';
    import detailCommon from '../univCorrectedProgress/detailCommon'

    export default {
         components:{
          detailCommon 
        },
        name:'eduCorrectedReview',
        data() {
            return {
                //表格数据
                dict: dict,
                tableData: {
                    correctiveReportDto: {
                        title: ''
                    }
                },
                paneShow:true,
                reviewDesc:'',
                activeName:'corrected',
                reformNumber:0,
                unReformNumber:0,
                corrective_report_id: this.$route.params.id,
                basis_url: '',
                dialogImageUrl: '',
                dialogShowImages:false,
                submitReviewDialog:false,
                listLoading:true

            }
        },
        created() {
            this.getTableData()
          
        },
        methods: {
            getTableData() {
                getCorrectedProgressData({corrective_report_id:this.$route.params.id}).then(res => {
                    if (res.data.status == 200) {
                        let temp_data = JSON.parse(res.data.datas);
                        temp_data.correctiveItems.map((item, index) => {
                            if(item.correctiveItemDto.status == 1  || item.correctiveItemDto.status === 3) return this.reformNumber ++
                            if(item.correctiveItemDto.status == 2) return this.unReformNumber ++
                        })
                        this.tableData = temp_data;
                        setTimeout(()=>{
                                this.paneShow = false
                        },200)

                        this.listLoading = false
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                    }
                })
            },
            handleClose() {
                this.reviewSuggest = '';
                this.submitReviewDialog = false;
            },
            downloadFile(url, name){
                saveAs(url, name)
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogShowImages = true;
            },
            auditReview(code) {
                if (this.reviewDesc == '') return this.$message.error('请输入审核意见！');
                let params = {
                    corrective_report_id:this.corrective_report_id,
                    opinion:this.reviewDesc,
                    audit:code
                }
                eduAuditReview(params).then(res => {
                    if(res.data.status == 200){
                        if(res.data.status == 200) {
                            this.getTableData();
                            this.$notify({
                                title: '提示',
                                message: '审核操作成功！',
                                type: 'success',
                                duration: 2000
                            });
                            this.submitReviewDialog = false;
                            this.$router.go(-1)
                        }
                    }
                })
            }
        }
    }
</script>
<style scoped lang="scss" >
    .mt-20{
        margin-top: 20px;
    }
 
    .box-card{
        padding: 5px 25px;
        .grid-content{
            &.title{
                h4{
                    font-size:24px;
                    color:#101010;
                    margin:0;
                }
                p{
                    display:inline-block;
                    width:200px;
                    color:#333;
                    span{
                        color:#888;
                    }
                }
            }
        }
        .corrected-title{
            font-size:18px;
            color:#101010;
            padding:35px 0 10px;
            line-height:18px;
        }
        .items-column-row{
            background:#f7f7f7;
            overflow:hidden;
            margin:0 20px 20px;
            padding: 20px 10px;
            .items-column-row-title{
                line-height: 20px;
                display: block;
                font-size:16px;
                padding: 20px 0 10px;
                font-weight: bold;
                color: #333;
            }
            .items-column-row-column{
                margin: 10px 0 20px;
            }
        }
        .corrected-item{
            list-style:none;
            padding-left:0;
            li{
                .check-item-desc{
                    font-size:16px;
                    color:#333;
                    line-height: 28px;
                    margin-bottom:0;
                }
                div{
                    &.item-column{
                        padding:30px 0 0;
                    }
                    &.list-item{
                        border:1px solid #e6e6e6;
                        padding:10px 40px;
                        margin-bottom:20px;
                    }
                    &.top-border{
                        border-top:1px solid #e6e6e6;
                        margin-top:20px;
                    }
                    .image-list{
                        width:100%;
                        height:100px;
                        padding: 0;
                        li{
                            width:100px;
                            height:100px;
                            float:left;
                            list-style:none;
                            padding:0;
                            border:1px solid #efefef;
                            margin-right:15px;
                            overflow:hidden;
                            border-radius:8px;
                            img{
                                width:100%;
                                height:100%;
                            }
                        }
                    }
                    p{
                        font-size:14px;
                        color:rgba(102, 102, 102, 1);
                        line-height:24px;
                    }
                    span{
                        &.item-column-title{
                            font-size:14px;
                            font-weight:bold;
                            color:#333;
                            display:block;
                            margin-bottom:10px;
                            line-height:26px;
                        }
                    }
                }
            }
        }
    }
</style>
